<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Batch'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="50%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                <span>{{ t('批量下单') }}</span>
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="baTable.form.labelWidth + 'px'"
                >
                    <!-- <FormItem :label="t('客户名')" type="remoteSelect" v-model="baTable.form.items!.customer_id" :input-attr="{ pk: 'id', field: 'corp_name_cn', 'remote-url': '/system/customer/index' }" /> -->
                    <el-form-item :label="t('订单类型')">
                        <el-cascader v-model="baTable.form.items!.type" :options="options" :props="props" />
                    </el-form-item>
                    <FormItem :label="t('汇率')" type="number" v-model="baTable.form.items!.exchange" />
                    <FormItem :label="t('下单时间')" type="date" v-model="baTable.form.items!.create_time" />
                    <FormItem :label="t('订单')" type="file" v-model="baTable.form.items!.file" :input-attr="{ hideSelectFile: true, class: 'batch-file', onSuccess: uploadSuccess }" style="display: none;" />
                    <el-form-item :label="t('订单')">
                        <span class="btn" @click="batchFileClick">{{ t('选择文件') }}</span>
                        <span style="margin-left: 20px;">{{ state.file_name }}</span>
                    </el-form-item>
                    <!-- <FormItem :label="t('备注')" type="textarea" v-model.number="baTable.form.items!.note" :input-attr="{ rows: 5 }" /> -->
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('取消') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('保存') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useFilter } from '/@/stores/filter'

import { batchOrderFileApi } from '/@/api/most/customer/order'

const filter = useFilter();

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const props = {
    expandTrigger: 'hover',
}

const state = reactive({
    file_name: '',
})

const uploadSuccess = (res) => {
    // console.log(baTable.form.items!.file);
    console.log(res)
    state.file_name = res.data.file.name;
    return;
    let data = {
        customer_id:  baTable.form.items!.customer_id,
        file: baTable.form.items!.file
    };
    batchOrderFileApi(data).then((e) => {

    })
}

const batchFileClick = () => {
    // if(baTable.form.items!.customer_id == undefined || baTable.form.items!.customer_id == ''){
    //     ElMessage.error('请选择客户名');
    //     return;
    // }
    // 获取元素  
    var uploadElement = document.querySelector('.batch-file .el-upload');  
    
    // 检查元素是否存在  
    if (uploadElement) {  
    // 触发点击事件  
        uploadElement.click();  
    } else {  
        console.error('元素未找到');  
    }
}

const options = [
    {
        value: '出口',
        label: t('出口'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },{
        value: '进口',
        label: t('进口'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },{
        value: '内销',
        label: t('内销'),
        children: [{
            value: '买入交易',
            label: t('买入交易'),
        }, {
            value: '佣金交易',
            label: t('佣金交易'),
        }],
    },
]

onMounted(() => {
})

</script>

<style scoped lang="scss">

</style>
